<div id="profiles" v-cloak>

  <div purpose="page-content" class="container-fluid">
    <div class="d-flex flex-column">
      <div class="pb-4 d-flex flex-row justify-content-between">
        <div>
        <h3 purpose="page-heading">Configuration profiles</h3>
        </div>
        <div class="d-flex flex-row align-items-center">
          <p class="mb-0 mr-2">Team:</p>
          <select class="custom-select team-select" v-model="teamFilter" @change="changeTeamFilter()">
            <option :value="undefined" selected>All teams</option>
            <option v-for="team of teams" :value="team.fleetApid">{{team.teamName}}</option>
          </select>
        </div>
      </div>
    </div>
    <div class="d-flex flex-row justify-content-between pb-3">
      <div>
        <p><strong>Profiles</strong></p>
      </div>
      <div>
        <p style="color: #6A67FE; cursor: pointer;" @click="clickOpenAddProfileModal()">+ Add profile</p>
      </div>
    </div>
    <div style="overflow: visible;" class="mb-4 border rounded table-responsive-md" v-if="profilesToDisplay.length > 0">
      <table class="table my-0">
        <thead>
          <tr>
            <th class="sortable" :class="sortDirection === 'ASC' ? 'ascending' : sortDirection === 'DESC' ? 'descending' : ''" @click="clickChangeSortDirection()">
              <div style="cursor: pointer;" class="d-flex flex-row align-items-center pointer">
                <small><strong>Name</strong></small>
                <div class="sort-arrows"><span class="ascending-arrow"></span><span class="descending-arrow"></span></div>
              </div>
            </th>
            <th><small><strong>Platform</strong></small></th>
            <th v-if="teamFilter === undefined"><span><small><strong>Team</strong></small></span></th>
            <th><span><small><strong>Upload date</strong></small></span></th>
            <th></th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="profile in profilesToDisplay">
            <td class="name-column">{{profile.name}}</td>
            <td>{{platformFriendlyNames[profile.platform]}}</td>
            <td v-if="teamFilter === undefined">
              <a class="affected-teams-link" v-if="profile.teams && profile.teams.length > 0">
                <span class="truncated-affected-teams" v-if="profile.teams.length > 1">
                  {{profile.teams.length}} teams
                  <div class="teams-tooltip">
                    <p v-for="team in profile.teams" @click="clickChangeTeamFilter(team.fleetApid)">{{team.teamName}}</p>
                  </div>
                </span>
                <span v-else @click="clickChangeTeamFilter(profile.teams[0].fleetApid)">
                  {{profile.teams[0].teamName}}
                </span>
              </a>
              <p v-else>---</p>
            </td>
            <td>
              <js-timestamp :at="profile.createdAt" format="timeago"></js-timestamp>
            </td>
            <td>
              <div class="d-flex flex-row align-items-start justify-content-end">
                <img style="height: 16px; margin-right: 24px;" alt="download" class="pointer" src="/images/download-16x16@2x.png" @click="clickDownloadProfile(profile)">
                <img style="height: 16px; margin-right: 24px;" alt="edit" class="pointer" src="/images/edit-pencil-16x21@2x.png" @click="clickOpenEditModal(profile)">
                <img style="height: 16px" alt="delete" class="pointer" src="/images/delete-16x21@2x.png" @click="clickOpenDeleteModal(profile)">
              </div>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    <div v-else>
      <h2 class="px-3 text-center mx-auto pt-5">No profiles matching the selected filters were found.</h2>
    </div>
  </div>
<%//  ╔═╗╔╦╗╦╔╦╗  ╔═╗╦═╗╔═╗╔═╗╦╦  ╔═╗
  //  ║╣  ║║║ ║   ╠═╝╠╦╝║ ║╠╣ ║║  ║╣
  //  ╚═╝═╩╝╩ ╩   ╩  ╩╚═╚═╝╚  ╩╩═╝╚═╝%>
  <modal v-if="modal === 'edit-profile'" hide-close-button="true" @close="closeModal()">
    <div>
      <div class="d-flex flex-row justify-content-between">
        <h3 class="mb-4">Edit profile</h3>
        <div class="pointer" @click="closeModal()">&times;</div>
      </div>
      <ajax-form :handle-submitting="handleSubmittingEditProfileForm" :syncing.sync="syncing" :cloud-error.sync="cloudError" :form-errors.sync="formErrors" :form-data="formData" :form-rules="editProfileFormRules" @submitted="submittedForm()">
        <div v-if="labelsSyncing">
          <div class="d-flex flex-row align-items-center justify-content-center my-4" >
            <div v-if="!cloudError">
              <span style="top: -4px; font-size: 16px; margin: 0 8px 0 0;" class="loading-dot dot1 position-relative"><span class="fa fa-circle"></span></span>
              <span style="top: -4px; font-size: 16px; margin: 0 8px 0 0;" class="loading-dot dot2 position-relative"><span class="fa fa-circle"></span></span>
              <span style="top: -4px; font-size: 16px; margin: 0 8px 0 0;" class="loading-dot dot3 position-relative"><span class="fa fa-circle"></span></span>
              <span style="top: -4px; font-size: 16px; margin: 0 8px 0 0;" class="loading-dot dot4 position-relative"><span class="fa fa-circle"></span></span>
            </div>
            <cloud-error v-if="cloudError"></cloud-error>
          </div>
        </div>
        <div v-else>
          <div purpose="profile-information" v-if="!formData.newProfile">
            <div class="d-flex flex-row justify-content-start">
              <img style="height: 40px; width: 34px;" alt="Configuration profile" src="/images/profile-34x40@2x.png">
              <div class="d-flex flex-column">
                <p><strong>{{profileToEdit.name}}</strong></p>
                <p class="muted">{{platformFriendlyNames[profileToEdit.platform]}}</p>
              </div>
            </div>
          </div>
          <cloud-error v-if="cloudError === 'payloadIdentifierDoesNotMatch'"></cloud-error>
          <file-upload id="edit-file-upload" mode="profiles" :disabled="syncing" accept=".xml,.mobileconfig" v-model="formData.newProfile"></file-upload>
          <div purpose="teams-picker">
            <p class="mb-2"><strong>Teams</strong></p>
            <multifield :value="formData.teams" v-model="formData.newTeamIds" input-type="teamSelect" :select-options="teams" add-button-text="Add team"></multifield>
          </div>
          <div>
            <p><strong>Target</strong></p>
            <div class="form-group">
            <label purpose="form-option" class="form-control border-0 mb-2 p-0 h-auto"  :class="[formData.profileTarget === 'all' ? 'selected' : '']">
              <input type="radio" :class="[formErrors.profileTarget ? 'is-invalid' : '']" v-model.trim="formData.profileTarget" value="all">
              <span purpose="custom-radio"><span purpose="custom-radio-selected"></span></span>
              All hosts on selected teams
            </label>
            <label purpose="form-option" class="form-control border-0 mb-0 p-0"  :class="[formData.profileTarget === 'custom' ? 'selected' : '']">
              <input type="radio" :class="[formErrors.profileTarget ? 'is-invalid' : '']" v-model.trim="formData.profileTarget" value="custom">
              <span purpose="custom-radio"><span purpose="custom-radio-selected"></span></span>
              Custom
            </label>
            </div>
          </div>
          <div v-if="formData.profileTarget === 'custom'">
            <select class="custom-select form-control mb-4" v-model="formData.labelTargetBehavior">
              <option value="include" selected>Hosts with all of these labels</option>
              <option value="exclude">Hosts with none of these labels</option>
            </select>

            <multifield :value="formData.labels" v-model="formData.labels" input-type="checkboxes" :select-options="labels"></multifield>
          </div>
          <cloud-error v-if="cloudError && cloudError !== 'payloadIdentifierDoesNotMatch'"></cloud-error>
        </div>
        <div purpose="modal-buttons" class="d-flex flex-row justify-content-end align-items-center">
          <ajax-button :syncing.sync="syncing" purpose="modal-button" type="submit">Save</ajax-button>
        </div>
      </ajax-form>
    </div>
  </modal>
  <%//  ╔╦╗╔═╗╦  ╔═╗╔╦╗╔═╗  ╔═╗╦═╗╔═╗╔═╗╦╦  ╔═╗
    //   ║║║╣ ║  ║╣  ║ ║╣   ╠═╝╠╦╝║ ║╠╣ ║║  ║╣
    //  ═╩╝╚═╝╩═╝╚═╝ ╩ ╚═╝  ╩  ╩╚═╚═╝╚  ╩╩═╝╚═╝%>
  <modal v-if="modal === 'delete-profile'" hide-close-button="true" @close="closeModal()">
    <div class="d-flex flex-row justify-content-between">
      <h3 class="mb-4">Delete profile</h3>
      <div class="pointer" @click="closeModal()">&times;</div>
    </div>
    <p>Delete this profile from all teams</p>
    <ajax-form :handle-submitting="handleSubmittingDeleteProfileForm" :syncing.sync="syncing" :cloud-error.sync="cloudError" :form-errors.sync="formErrors" :form-data="formData" :form-rules="editProfileFormRules" @submitted="submittedForm()">
    <cloud-error v-if="cloudError"></cloud-error>
    <div class="d-flex flex-row justify-content-end align-items-center">
      <a class="mr-3" style="color: #D66C7B; cursor: pointer;" @click="closeModal()">Cancel</a>
      <ajax-button class="btn" purpose="delete-button" :syncing.sync="syncing">Delete</ajax-button>
    </div>
    </ajax-form>
  </modal>
  <%//  ╔═╗╔╦╗╔╦╗  ╔═╗╦═╗╔═╗╔═╗╦╦  ╔═╗
    //  ╠═╣ ║║ ║║  ╠═╝╠╦╝║ ║╠╣ ║║  ║╣
    //  ╩ ╩═╩╝═╩╝  ╩  ╩╚═╚═╝╚  ╩╩═╝╚═╝%>
  <modal v-if="modal === 'add-profile'" hide-close-button="true" @close="closeModal()">
    <div>
      <div class="d-flex flex-row justify-content-between">
        <h3 class="mb-4">Add profile</h3>
        <div class="pointer" @click="closeModal()">&times;</div>
      </div>
      <ajax-form :handle-submitting="handleSubmittingAddProfileForm" :syncing.sync="syncing" :cloud-error.sync="cloudError" :form-errors.sync="formErrors" :form-data="formData" :form-rules="addProfileFormRules" @submitted="submittedForm()">
        <div v-if="labelsSyncing">
          <div class="d-flex flex-row align-items-center justify-content-center my-4" >
            <div v-if="!cloudError">
              <span style="top: -4px; font-size: 16px; margin: 0 8px 0 0;" class="loading-dot dot1 position-relative"><span class="fa fa-circle"></span></span>
              <span style="top: -4px; font-size: 16px; margin: 0 8px 0 0;" class="loading-dot dot2 position-relative"><span class="fa fa-circle"></span></span>
              <span style="top: -4px; font-size: 16px; margin: 0 8px 0 0;" class="loading-dot dot3 position-relative"><span class="fa fa-circle"></span></span>
              <span style="top: -4px; font-size: 16px; margin: 0 8px 0 0;" class="loading-dot dot4 position-relative"><span class="fa fa-circle"></span></span>
            </div>
            <cloud-error v-if="cloudError"></cloud-error>
          </div>

        </div>
        <div v-else>
          <file-upload id="add-file-upload" mode="profiles" :class="[formErrors.newProfile ? 'is-invalid' : '']"  :disabled="syncing" v-model="formData.newProfile">
          </file-upload>
          <div class="invalid-feedback text-center" v-if="formErrors.newProfile">Please upload a new profile.</div>

          <div purpose="teams-picker" class="mt-4">
            <p class="mb-2"><strong>Teams</strong></p>
            <multifield :value="formData.teams" v-model="formData.teams" input-type="teamSelect" :select-options="teams" add-button-text="Add team"></multifield>
          </div>
          <div class="form-group">
            <p><strong>Target</strong></p>
            <label purpose="form-option" class="form-control border-0 mb-2 p-0 h-auto">
              <input type="radio" :class="[formErrors.profileTarget ? 'is-invalid' : '']" v-model.trim="formData.profileTarget" value="all">
              <span purpose="custom-radio"><span purpose="custom-radio-selected"></span></span>
              All hosts on selected teams
            </label>
            <label purpose="form-option" class="form-control border-0 mb-0 p-0">
              <input type="radio" :class="[formErrors.profileTarget ? 'is-invalid' : '']" v-model.trim="formData.profileTarget" value="custom">
              <span purpose="custom-radio"><span purpose="custom-radio-selected"></span></span>
              Custom
            </label>
          </div>
          <div v-if="formData.profileTarget === 'custom'">
            <select class="custom-select form-control mb-4" v-model="formData.labelTargetBehavior">
              <option value="include" selected>Hosts with all of these labels</option>
              <option value="exclude">Hosts with none of these labels</option>
            </select>

            <multifield :value="formData.labels" v-model="formData.labels" input-type="checkboxes" :select-options="labels"></multifield>
          </div>
          <cloud-error v-if="cloudError"></cloud-error>
        </div>
        <div purpose="modal-buttons" class="d-flex flex-row justify-content-end align-items-center">
          <a purpose="cancel-button" @click="closeModal()">Cancel</a>
          <ajax-button :syncing.sync="syncing" purpose="modal-button" :disabled="!formData.newProfile" type="submit">Add</ajax-button>
        </div>
      </ajax-form>
    </div>
  </modal>
  <ajax-overlay :syncing-message="syncingMessage" :syncing="overlaySyncing"></ajax-overlay>
</div>
<%- /* Expose server-rendered data as window.SAILS_LOCALS :: */ exposeLocalsToBrowser() %>
